<template>
  <div class="products-container">
    <van-swipe class="products-container-swipe" :autoplay="3000">
      <van-swipe-item v-for="(v,k) in product.images" :key="k">
        <img :src="config.uploadUrl+v" >
      </van-swipe-item>
    </van-swipe>

    <van-cell-group>
      <van-cell>
        <div class="products-container-title">{{ product.name }}</div>
        <div class="products-container-price" v-if="product.priceRmb > 0">￥:{{ Math.round(product.priceRmb,2) }}</div>
        <div class="products-container-price" v-if="product.priceRetail > 0">零售积分:{{ Math.round(product.priceRetail,2) }}</div>
        <div class="products-container-price" v-if="product.priceShop > 0">商城积分:{{ Math.round(product.priceShop,2) }}</div>
      </van-cell>
      <van-cell class="products-container-express">
        <!--<van-col span="10">运费：免运费</van-col>-->
        <van-col span="14">库存：{{ product.stock }}</van-col>
      </van-cell>
    </van-cell-group>

    <div>{{ product.details }}</div>

    <van-goods-action>
      <van-goods-action-mini-btn icon="cart" @click="$router.push({ name: 'cart' })">购物车</van-goods-action-mini-btn>
      <van-goods-action-big-btn @click="onAddCart">加入购物车</van-goods-action-big-btn>
      <van-goods-action-big-btn primary @click="onProductBuy">立即购买</van-goods-action-big-btn>
    </van-goods-action>
  </div>
</template>

<script>
import qs from 'qs';
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn,
  Toast
} from 'vant';
import ajaxVant from '../../utils/ajaxVant';
import cart from '../../utils/cart';
import config from '../../config';

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn,
    [Toast.name]: Toast
  },
  data() {
    return {
      config: config,
      product: {
        name: '产品',
        images: [],
        priceRmb: 0,
        priceRetail: 0,
        priceShop: 0,
        stock: 0,
        details: ''
      }
    };
  },
  mounted() {
    var _this = this;
    ajaxVant.get('/products/' + _this.$route.params.id).then(function(data) {
      if (data !== false) {
        for (var i in _this.product) {
          switch (i) {
            case 'images':
              _this.product[i] = JSON.parse(data.products.images);
              break;
            case 'priceRmb':
              _this.product[i] = data.products['price_rmb'];
              break;
            case 'priceRetail':
              _this.product[i] = data.products['price_retail'];
              break;
            case 'priceShop':
              _this.product[i] = data.products['price_shop'];
              break;
            default:
              _this.product[i] = data.products[i];
              break;
          }
        }
      }
    });
  },
  methods: {
    onAddCart() {
      Toast('加入购物车');
      cart.addCart(this.$route.params.id, 1);
    },
    onProductBuy() {
      this.$router.push({ name: 'order', query: { products: qs.stringify({ [this.$route.params.id]: { amount: 1 }}) }});
    }
  }
};
</script>

<style>
.products-container {
  padding-bottom: 50px;
}
.products-container-swipe img {
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  margin: 0 auto;
}
.products-container-title {
  font-size: 16px;
}
.products-container-price {
  color: #f44;
}
.products-container-express {
  color: #999;
  font-size: 12px;
  padding: 5px 15px;
}
.products-container-cell-group {
  margin: 15px 0;
}
.products-container-cell-group .van-cell__value {
  color: #999;
}
.products-container .van-goods-action {
  z-index: 1;
}
</style>